package showcase

import (
	"github.com/templui/templui/internal/components/form"
	"github.com/templui/templui/internal/components/selectbox"
)

templ SelectBoxForm() {
	<div class="w-full max-w-sm">
		@form.Item() {
			@form.Label(form.LabelProps{
				For: "select-form",
			}) {
				Fruit
			}
			@selectbox.SelectBox() {
				@selectbox.Trigger(selectbox.TriggerProps{
					ID:       "select-form",
					Name:     "fruit",
					HasError: true,
				}) {
					@selectbox.Value(selectbox.ValueProps{
						Placeholder: "Select a fruit",
					})
				}
				@selectbox.Content() {
					@selectbox.Item(selectbox.ItemProps{
						Value: "apple",
					}) {
						Apple
					}
					@selectbox.Item(selectbox.ItemProps{
						Value: "banana",
					}) {
						Banana
					}
					@selectbox.Item(selectbox.ItemProps{
						Value:    "blueberry",
						Selected: true,
					}) {
						Blueberry 
					}
					@selectbox.Item(selectbox.ItemProps{
						Value: "grapes",
					}) {
						Grapes
					}
					@selectbox.Item(selectbox.ItemProps{
						Value:    "pineapple",
						Disabled: true,
					}) {
						Pineapple (out of stock)
					}
				}
			}
			@form.Description() {
				Select a fruit category.
			}
			@form.Message(form.MessageProps{
				Variant: form.MessageVariantError,
			}) {
				A fruit selection is required.
			}
		}
	</div>
}
